<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>pConnecTV Client</title>
<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>

<div>
<div id="profileDiv"></div>
<div>
	<input type="button" id="stage1" value="Stage 1" onclick="javascript: stage(50);"/>
</div>
<div>
	<input type="button" id="stage2" value="Stage 2" onclick="javascript: stage(100);"/>
</div>
<div>
	<input type="button" id="stage3" value="Stage 3" onclick="javascript: stage(200);"/>
</div>

<h2>Client Profile</h2>
<p><input type="text" id="clientProfile" size="150" /> <input
	type="button" onclick="javascript: sendClientProfile();"
	value="Get Recomendations" /></p>
</div>

<div id="messages"></div>

<div>
<div>
<h2>Channel List</h2>
<a href="#" id="seeChannelList"
	onclick="getChannelList(); $(this).hide(); $('#hideChannelList').show();">See</a>
<a href="#" id="hideChannelList"
	onclick="$(this).hide(); $('#channelListTable').hide(); $('#seeChannelList').show();"
	style="display: none;">Hide</a></div>
<div id="channelListTable" style="display: none;">
<table width="100%" cellpadding="1" cellspacing="0" border="1">
	<thead>
		<tr>
			<th>Name</th>
			<th>Server Location</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody id="channels">
	</tbody>
</table>

<a href="#" onclick="javascript: $('#channelForm').show();">Create
new</a>

<div id="channelForm" style="display: none;">
<h2>New Channel</h2>
<p><span class="label">Name:</span><input type="text"
	id="channelName" /></p>
<p><span class="label">Server Location:</span><input type="text"
	id="channelServerLocation" /></p>
<p><input type="button" onclick="javascript: createChannel();"
	value="Create" /><input type="button"
	onclick="javascript: $('#channelForm').hide();" value="Cancel" /></p>
</div>
</div>
</div>

<div id="programListOfChannel" style="display: none;">
<h2 id="labelProgramListOfChannel"></h2>

<table width="100%" cellpadding="1" cellspacing="0" border="1">
	<thead>
		<tr>
			<th>Title</th>
			<th>Genre</th>
		</tr>
	</thead>
	<tbody id="programs">
	</tbody>
</table>

<p><input type="button" onclick="$('#programListOfChannel').hide();"
	value="Close" /></p>
</div>

<div>
<div>
<h2>Client List</h2>
<a href="#" id="seeClientList"
	onclick="getClientList(); $(this).hide(); $('#hideClientList').show();">See</a>
<a href="#" id="hideClientList"
	onclick="$(this).hide(); $('#clientListTable').hide(); $('#seeClientList').show();"
	style="display: none;">Hide</a></div>
<div id="clientListTable" style="display: none;">
<table width="100%" cellpadding="1" cellspacing="0" border="1">
	<thead>
		<tr>
			<th>Hash</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody id="clients"></tbody>
</table>

<a href="#" onclick="javascript: $('#clientForm').show();">Create
new</a>

<div id="clientForm" style="display: none;">
<h2>New Client</h2>
<p><span class="label">ID:</span><input type="text" id="clientId" /></p>
<p><input type="button" onclick="javascript: createClient();"
	value="Create" /><input type="button"
	onclick="javascript: $('#clientForm').hide();" value="Cancel" /></p>
</div>
<div id="profileForm" style="display: none;">
<h2>New Profile</h2>
<p><span class="label">Program:</span><select id="profilePrograms"></select></p>
<p><span class="label">Rating:</span><input type="text"
	id="profileRating" /></p>
<p><input type="button" onclick="javascript: createProfile();"
	value="Create" /><input type="button"
	onclick="javascript: $('#profileForm').hide();" value="Cancel" /></p>
</div>
</div>
</div>

<div>
<div>
<h2>Profile List</h2>
<a href="#" id="seeProfileList"
	onclick="getProfileList(); $(this).hide(); $('#hideProfileList').show(); $('#profileListTable').show();">See</a>
<a href="#" id="hideProfileList"
	onclick="$(this).hide(); $('#profileListTable').hide(); $('#seeProfileList').show();"
	style="display: none;">Hide</a></div>
<table id="profileListTable" width="100%" cellpadding="1"
	cellspacing="0" border="1" style="display: none;">
	<thead>
		<tr>
			<th>Client</th>
			<th>Program</th>
			<th>Rating</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody id="profiles"></tbody>
</table>
</div>

</body>
</html>
